iT邦幫忙

2024 iThome 鐵人賽

DAY 25
0
Python

自主學習Python網路爬蟲-PTT爬蟲、Hahow爬蟲、Yahoo電影爬蟲實作系列 第 25

Day25 藉由教學影片學習HTML與CSS基礎

  • 分享至 

  • xImage
  •  

今天要分享的是CSS中的第一子元素與最後子元素權重背景 background偽類 pseudo classes以及偽元素 pseudo element
一、第一子元素與最後子元素
第一個子元素:firsy-child,最後一個子元素:last-child
https://ithelp.ithome.com.tw/upload/images/20241006/20167787ObPTo6Uy3x.png
二、權重
#在CSS中,先比較權重大小,後比較先後順序
一旦寫下important語法,其他人無法修改此CSS,在維護上會很麻煩,因此要盡量避免使用此語法
1.在相等權重下,寫在後面的會被採用,並覆蓋前面的
https://ithelp.ithome.com.tw/upload/images/20241006/20167787OEtbLHDy1g.png
2.class選擇器(0,1,0)的權重大於元素選擇器的權重(0,0,1)
https://ithelp.ithome.com.tw/upload/images/20241006/20167787f0Csn6hxVQ.png
3.id選擇器(1,0,0)的權重大於class選擇器的權重(0,1,0)
https://ithelp.ithome.com.tw/upload/images/20241006/201677875OSjKi6fIL.png
4.inline的權重(1,0,0,0)遠大於id選擇器的權重(1,0,0)
https://ithelp.ithome.com.tw/upload/images/20241006/20167787Gjyh23BBwc.png
5.important的權重是魔王級的
https://ithelp.ithome.com.tw/upload/images/20241006/20167787DNuLo4aQUz.png
三、背景 background
background-repeat:照片不要重複
background-position:照片在頁面中的位置
background-size:照片在頁面中的大小
https://ithelp.ithome.com.tw/upload/images/20241006/20167787ZuMOIqxqcO.png
輸出結果為:
https://ithelp.ithome.com.tw/upload/images/20241006/20167787Q2heNS9CIO.png
四、偽類別 pseudo classes
https://ithelp.ithome.com.tw/upload/images/20241006/20167787HAXql3v4KG.png
https://ithelp.ithome.com.tw/upload/images/20241006/20167787f1jVQHWmFs.png
五、偽元素 pseudo element
https://ithelp.ithome.com.tw/upload/images/20241006/20167787pCehRIQNes.png
https://ithelp.ithome.com.tw/upload/images/20241006/20167787SWN4vmQhZ5.png


以上是我今天的分享,謝謝大家!
參考網址:https://www.youtube.com/watch?v=fa214Ct6t9w&list=LL&index=3


上一篇
Day24 藉由教學影片學習HTML與CSS基礎
下一篇
Day26 藉由教學影片學習HTML與CSS基礎
系列文
自主學習Python網路爬蟲-PTT爬蟲、Hahow爬蟲、Yahoo電影爬蟲實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言